<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="restart.css"/>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="title">
    <h1>ToDay</h1>
    <h3 class="title2">Monday 8,August</h3>
</div>
<ul id="ul">

</ul>

<script>
    /**
     * TODO LIST
     * 1. 星期一 ~ 星期日选用其它的标签实现。
     * 2. 星期一 ~ 星期日不应该有点击状态
     * 3. 样式和原图看齐
     * 4. 通用样式不以JS添加，使用CSS样式表书写
     * 5. 点击区域为li，样式添加到li归属的span上
     * 6. 仅有日期点击会变绿
     */



    var max = 6 * 7;
    var $ul = $('ul');
    for (var i = 0; i < max; i++) {
        $ul.append($('<li><span></span></li>'))
    }

    var spans = $('span');
    var lisTitle = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    for (i = 0; i < 7; i++) {
        spans.eq(i).text(lisTitle[i]);
        spans.eq(i).css('fontWeight', '1000');
        spans.eq(i).css('fontSize', '20px');
        spans.eq(i).css('width', '60px');
        spans.eq(i).css('marginLeft', '18px');
    }

    var j = 8;
    for (i = 1; i < 32; i++) {
        if (j === 42) {
            i = 1;
        }
        spans.eq(j).css('color', 'rgb(201,210,206)');
        spans.eq(j).text('' + i);
        spans.eq(j).css('marginLeft', '25px');
        spans.eq(j).css('fontWeight', '1000');
        spans.eq(j).css('fontSize', '23px');
        spans.eq(j).css('marginLeft', '30px');
        j++;
    }

    for (i = 8; i < 17; i++) {
        spans.eq(i).css('paddingLeft', '16px');
    }
    for (i = 17; i < 39; i++) {
        spans.eq(i).css('paddingLeft', '10px');
    }
    var clearBackGround = function () {
        for (var i = 0; i < 42; i++) {
            spans.eq(i).css('backgroundColor', '');
            spans.eq(i).css('borderColor', 'rgb(255,255,255)');
            spans.eq(i).css('boxShadow', '');
        }
    };
    var onMouseDown = function (event) {
        // debugger;
        var set = event.target;
        const $set = $(set);
        console.log(event);
        console.log(event.target);
        console.log(event.toElement);
        console.log(set.tagName);
        if (set.tagName === 'SPAN') {
            $set
                .css('backgroundColor', 'rgb(0,218,146)')
                .css('transition', 'all')
                .css('transitionDuration', '1s')
                .css('backgroundColor', 'rgb(0,218,146)')
                .css('borderStyle', 'solid')
                .css('borderWidth', '1px');
            $set.css('borderRadius', '500px');
            $set.css('borderColor', 'rgb(0,218,146)');
            $set.css('boxShadow', '0px 13px 35px rgba(0,218,146,0.45)');
        } else if (set.tagName !== 'SPAN') {
            alert('123')
        }

    };

    $(document).on('click', 'span', function (event) {
        clearBackGround();
        onMouseDown(event);
    });

    //    $('ul li span').click(function (event) {
    //        clearBackGround();
    //        onMouseDown(event);
    //        console.log(event);
    //    })

    //    spans.click(function (event) {
    //        clearBackGround();
    //        onMouseDown(event);
    //    });


    /*    $(document).on('click','span',function (event) {
            console.log(event);
            clearBackGround();
            onMouseDown(event);
        });*/

</script>
</body>
</html>